<template>
  <view class="complain-container">
    <view class="complain-form">
      <view class="form-item">
        <text class="label">投诉订单id :{{ orderId }}</text>
      </view>
      <view class="form-item">
        <text class="label">投诉内容</text>
        <textarea v-model="content" placeholder="请详细描述您的投诉内容" class="complain-textarea" />
      </view>

      <view class="submit-btn">
        <nut-button type="primary" @click="submitComplain">提交投诉</nut-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { submitComplaint } from "@/api/customer";
const userid = uni.getStorageSync("userId");
const orderId = ref(null);
const content = ref("");

// 提交投诉
const submitComplain = async () => {
  if (!content.value) {
    uni.showToast({
      title: "请输入投诉内容",
      icon: "none",
    });
    return;
  }

  try {
    const formData = {
      businessOrderId: orderId.value,
      customerId: userid,
      complaintContent: content.value,
    };
    await submitComplaint(formData);
    uni.showToast({
      title: "投诉提交成功",
      icon: "success",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    console.error("提交投诉失败:", error);
    uni.showToast({
      title: "提交投诉失败",
      icon: "none",
    });
  }
};

onLoad((options) => {
  if (options && options.id) {
    orderId.value = options.id;
  }
});
</script>

<style scoped>
.complain-container {
  padding: 20px;
  background-color: #fff;
}

.complain-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.label {
  font-size: 16px;
  color: #333;
}

.complain-textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.submit-btn {
  margin-top: 20px;
}
</style>
